<template>
  <view class="tag" :style="{ background: tagBgColor }">
    <text class="tag-text">
      <slot></slot>
    </text>
  </view>
</template>

<script>
export default {
  name: "k-tag",
  props: {
    type: {
      type: String,
      default: "success",
    },
  },
  computed: {
    tagBgColor() {
      const { type } = this;
      switch (type) {
        case "success":
          return this.$CONFIG.SUN_BASE_COLOR;
        case "warning":
          return "#FB8C3D";
        case "error":
        case "danger":
          return "#e84010 ";
        default:
          return this.$CONFIG.SUN_BASE_COLOR;
      }
    },
  },
};
</script>

<style scoped lang="scss">
.tag {
  min-width: 68rpx;
  padding: 0 10rpx;
  height: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  position: relative;
  border-radius: 12rpx 12rpx 12rpx 0rpx;
  background: $base-color;
  .tag-text {
    font-size: 16rpx;
    position: relative;
    z-index: 2;
    white-space: nowrap;
  }
  image {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
}
</style>
